<script>
import TimeQuery from './TimeQuery'
import echarts from 'echarts'
import { getAnalysisRc, getAnalysisJL } from 'services/x-start/mgr/common'

export default {
  components: { TimeQuery },
  data() {
    return {
      type: 'personNumSum',
      analysisRc: {},
      analysisJL: {},
      formData: {},
    }
  },
  created() {
    this.getAnalysisRc()
    // this.getAnalysisJL({ type: this.$route.params.id })
  },
  methods: {
    update(to) {
      this.getAnalysisRc(to && to.params && to.params.id)
    },
    getAnalysisRc(id) {
      getAnalysisRc({ ...this.formData, type: id || this.$route.params.id })
        .then(data => {
          this.analysisRc = data || {}
          let keys = Object.keys(this.analysisRc)
          if (keys.length) {
            this.draw({
              ref: 'charts1',
              legend: Object.keys(this.analysisRc),
              x: Object.keys(this.analysisRc[keys[0]]),
              series: this.getDate().map(item => ({
                name: item.name,
                type: 'line',
                stack: '总量',
                data: item.y,
              })),
              type: 'bar',
            })
          } else {
            this.$message.warning('暂无数据')
          }
        })
        .catch(({ payload }) => {
          this.$message.error(payload && payload.msg)
        })
    },
    getDate() {
      let datas = []
      for (const key in this.analysisRc) {
        let data = this.analysisRc[key]
        let obj = {}
        obj.name = key
        let arr = []
        for (const i in data) {
          arr.push(data[i][this.type])
        }
        obj.y = arr
        datas.push(obj)
      }
      console.log(datas)
      return datas
    },
    // getAnalysisJL(type) {
    //   getAnalysisJL(type)
    //     .then(data => {
    //       this.analysisJL = data
    //       let keys = Object.keys(this.analysisJL)
    //       this.draw({
    //         ref: 'charts2',
    //         // name: '实时运动人数',
    //         legend: Object.keys(this.analysisJL),
    //         x: Object.keys(this.analysisJL[keys[0]]),
    //         series: [
    //           {
    //             name: keys[0],
    //             type: 'line',
    //             stack: '总量',
    //             data: Object.values(this.analysisJL[keys[0]]),
    //           },
    //           {
    //             name: keys[1],
    //             type: 'line',
    //             stack: '总量',
    //             data: Object.values(this.analysisJL[keys[1]]),
    //           },
    //         ],
    //         type: 'bar',
    //       })
    //     })
    //     .catch(({ payload }) => {
    //       this.$message.error(payload && payload.msg)
    //     })
    // },
    draw({ ref, name = '', x = [], series = [], legend = [] }) {
      let dom = echarts.init(this.$refs[ref])
      dom.setOption(
        {
          title: {
            text: name,
            x: 'center',
          },
          legend: {
            data: legend,
            // selectedMode: 'single',
          },
          tooltip: {
            trigger: 'axis',
          },
          xAxis: {
            type: 'category',
            data: x,
            axisLine: {
              lineStyle: {
                color: '#999', // 颜色
              },
            },
          },
          yAxis: {
            type: 'value',
          },
          series: series,
        },
        true
      )
    },
    typechangeRc(data) {
      this.formData = data
      this.getAnalysisRc()
    },
    // typechangeJL(data) {
    //   this.getAnalysisJL(data)
    // },
  },
}
</script>

<template lang="pug">
  .content
    .warehouse
      .title 对比分析
      TimeQuery(@typechange="typechangeRc" :type.sync="type" :IsShow="true")
      .draw(ref="charts1")
    //- .warehouse
    //-   .title 饱和度及集流力
    //-   TimeQuery(@typechange="typechangeJL" :IsShow="true")
    //-   .draw(ref="charts2")
</template>
<style lang="stylus" scoped>
.el-radio-group
  display block
  text-align center
.content
  .warehouse
    background-color #fff
    padding 10px 20px
    margin-bottom 20px
    box-sizing border-box
    text-align left
    .text
      color #5c5c5c
      line-height 2em
      .time
        >p
          display inline-block
    .draw
      height 70vh
    .title
      color #424857
      font-size 16px
      position relative
      padding-left 20px
      line-height 36px
      border-bottom 1px solid #e3e6ec
      text-align left
      &:after
        content ''
        display block
        width 3px
        height 16px
        top 50%
        left 0
        margin-top -8px
        background-color #FF6D60
        position absolute
@media screen and (max-width: 650px)
  .content
    .warehouse
      .draw
        height 300px
</style>
